<template>
  <div>
    <div class="header">
      <span><img src="@/assets/menu/后台.png" alt="" class="icon" /></span>
      <p>民宿租赁后台系统</p>
      <button class="btn" @click="logout">返回前台</button>
    </div>
    <div class="container">
      <div class="aside">
        <div v-if="roleShow">
          <div class="administration">
            <span><img src="@/assets/menu/房源管理.png" alt="" /></span>
            <router-link active-class="active" to="/menu/housing"
              >房源管理</router-link
            >
          </div>
          <div class="administration">
            <span><img src="@/assets/menu/订单管理.png" alt="" /></span>
            <router-link active-class="active" to="/menu/order"
              >订单管理</router-link
            >
          </div>
          <div class="administration">
            <span><img src="@/assets/menu/财务管理.png" alt="" /></span>
            <router-link active-class="active" to="/menu/finance"
              >财务管理</router-link
            >
          </div>
        </div>
        <div v-if="show">
          <div class="administration">
            <span><img src="@/assets/menu/用户管理.png" alt="" /></span>
            <router-link active-class="active" to="/menu/user"
              >用户管理</router-link
            >
          </div>
          <div class="administration">
            <span><img src="@/assets/menu/房东直租.png" alt="" /></span>
            <router-link active-class="active" to="/menu/landlord"
              >房东管理</router-link
            >
          </div>
        </div>
      </div>
      <div class="content">
        <!-- 子路由的占位符 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
// import { getloginOutAPI } from '@/api/Login/logoutAPI'
export default {
  data() {
    return {
      roleShow: true,
      role: localStorage.getItem('userRole'),
      show: true
    }
  },
  methods: {
    hostmanagement() {
      if (this.role === '房东') {
        this.show = false
        this.roleShow = true
      } else {
        this.show = true
        this.roleShow = false
      }
    },
    logout() {
      this.$router.push('/homestay')
    }
  },
  components: {},
  created() {
    this.hostmanagement()
  }
}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.header {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 8.5vh;
  background-color: #0057a0;
  text-align: center;
  line-height: 70px;
  font-size: 22px;
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.icon {
  width: 25px;
  height: 25px;
  position: relative;
  top: 5px;
  right: 10px;
}

.btn {
  position: relative;
  left: 600px;
  top: 20px;
  height: 30px;
  width: 120px;
  background-color: #27ae60;
  border-radius: 3px;
  border: 1px solid #27ae60;
  color: white;
  cursor: pointer;
}

.aside {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 250px;
  height: 91.5vh;
  border-right: 1px solid #c5d3e2;
  background-color: #304156;

  .administration {
    margin-top: 35px;
    margin-left: 35px;
    height: 80px;
  }
}

img {
  width: 20px;
  height: 20px;
  position: relative;
  top: 4px;
  right: 8px;
}

a {
  font-size: 15px;
  color: #d5e5e6;
  transition: 0.3s;
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  color: #e74c3c;
}

.content {
  display: flex;
  flex: 1;
  background-color: #fff;
  width: 500px;
}

.container {
  display: flex;
}
.active {
  color: red;
}
</style>
